form表单提交前验证（EasyUI中在表单提交之前进行验证）

使用EasyUi我们可以在客户端表单提交之前进行验证，过程如下：只需在onSubmit的时候使用return$(“#form1“).form(’validate’)方法即可，EasyUi中form模块中的from(’validate’)方法会自行对我们指定的表单中required=true等需要验证的的元素进行验证，但有不通过的元素时返回一个false;$(“#form1“).form({url:’login.ashx’,onSubmit:function(){//表单验证return$(“#form1“).form(’validate’)},success:function(data){alert(data)}});以上所述是小编给大家介绍的EasyUI中在表单提交之前进行验证，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

form表单提交后，一般会弹出提交成功的字样，如果没有弹出，那么很有可能没有提交成功。

form表单提交失败主要有两种原因，一种原因是网路中断和伺服器故障等意外，因为这些意外都会导致伺服器端无法处理提交。第二种是验证失败、资料不全、权限设置，这些也会导致表格无法提交。

如果是第一种原因，可以使用 AJAX 去检测，或者可以不作理会,只要用户刷新就能正常提交。如果是第二种原因，一般都要在伺服器实际操作，这样很难进行表格提交，建议对form先进行重装。

form可以理解前台数据，如果真的想知道是否提交表格成功，那么还可以借助php，php可以理解为负责处理提交表格的后台。因此，要想最快知道是否提交form成功，最好就是查询php的数据。

很多时候，需要对Yii表单model中的对象设置的rules进行判断，但是有的时候可能需要在提交之前就在客户端进行验证，我这边设置的方法是在提交按钮上设置监听器，如果部分内容为空（比如多选按钮没有选择），那么提示出错信息。主要目的是页面不用提交后刷新，进入controller的对应函数之后再判断出错。显示rules（）验证规则函数的错误信息。这里为了验证是否选择某个单选按钮，对提交的按钮onclick设置监听，具体如下《Button onclick = “return fun()“/》 自定义fun()函数，需要有return true和false两种情况《script》 function fun(){ var CheckBox = document.getElementsByName(’checkBox.checked == true){ count++; } } if(count == 0 ){ var errorMeg = document.getElementById(’HomeworkTrConfig_flag_em_’); errorMeg.style.display = ““; errorMeg.innerHTML=“请至少选择一项“; return false; }else{ return true; } } 《/script》 补充：Yii表单验证中，提交前验证，不通过不提交以前记得有这么一个写法，就是当表单中的内容不符合验证规则时，会不允许提交，时间一长忘了怎么写了，手册里面也没写，查了一下资料，做一下笔记 ：$form = $this-》beginWidget(’CActiveForm’,array( ’id’ =》 ’add_host’, ’enableAjaxValidation’ =》 false, ’enableClientValidation’ =》 true, ’clientOptions’ =》 array( ’validateOnSubmit’ =》 true //在这个位置做验证 ), ’focus’ =》 array($model,’ip’) )); ?》

单独验证一个字段： var isValid=$(’#passwd’).textbox(“isValid“);//true为验证通过 验证表单里所有字段： var isValid = $(’#form’).form(’validate’);//所有字段有效返回true

《HTML》《head》《meta

比如有个表单

《form name=“myForm“ action=“demo_form.asp“ onsubmit=“return validateForm()“ method=“post“》First name: 《input type=“text“ name=“fname“》《input type=“submit“ value=“Submit“》《/form》

js验证函数：

function validateForm(){var x=document.forms.value;if (x==null || x==““)  {  alert(“First name must be filled out“);  return false;  }}

当提交表单的时候就会触发验证，运行结果：

在表单提交前进行验证的几种方式 . 在Django中，为了减轻后台压力，可以利用JavaScript在表单提交前对表单数据进行验证。下面提供了有效的几种方式（每个.html文件为一种方式）。 formpage1.html 复制代码 代码如下:《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》 《html xmlns=“http://www.w3.org/1999/xhtml“》 《head》 《meta http-equiv=“Content-Type“ content=“text/html; “ /》 《title》Example1《/title》 《script type=“text/javascript“ src=“/Resource/jquery-1.4.1.js“》《/script》 《script type=“text/javascript“》 function jump() { //清空表单所有数据 document.getElementById(“firstname“).value=““ document.getElementById(“lastname“).value=““ $(“#firstnameLabel“).text(““) $(“#lastnameLabel“).text(““) } $(document).ready(function(){ $(“#form1“).bind(“submit“, function(){ var txt_firstname = $.trim($(“#firstname“).attr(“value“)) var txt_lastname = $.trim($(“#lastname“).attr(“value“)) $(“#firstnameLabel“).text(““) $(“#lastnameLabel“).text(““) var isSuccess = 1; if(txt_firstname.length == 0) { $(“#firstnameLabel“).text(“firstname不能为空！“) $(“#firstnameLabel“).css({“color“:“red“}); isSuccess = 0; } if(txt_lastname.length == 0) { $(“#lastnameLabel“).text(“lastname不能为空！“) $(“#lastnameLabel“).css({“color“:“red“}); isSuccess = 0; } if(isSuccess == 0) { return false; } }) }) 《/script》 《/head》 《body》 提交表单前进行验证(方法一) 《hr width=“40%“ align=“left“ /》 《form id=“form1“ method=“post“ action=“/DealWithForm1/“》 《table》 《tr》 《td》first_name:《/td》 《td》《input name=“firstname“ type=“text“ id=“firstname“ /》《/td》 《td》《label id=“firstnameLabel“》《/label》《/td》 《/tr》 《tr》 《td》last_name:《/td》 《td》《input name=“lastname“ type=“text“ id=“lastname“ /》《/td》 《td》《label id=“lastnameLabel“》《/label》《/td》 《/tr》 《/table》 《hr width=“40%“ align=“left“ /》 《button type=“submit“》提交《/button》 《button type=“button“ onclick=“jump();“》取消《/button》 《/form》 《/body》 《/html》 formpage2.html 复制代码 代码如下:《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》 《html xmlns=“http://www.w3.org/1999/xhtml“》 《head》 《meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ /》 《title》Example2《/title》 《script type=“text/javascript“ src=“/Resource/jquery-1.4.1.js“》《/script》 《script type=“text/javascript“》 function jump() { //清空表单所有数据 document.getElementById(“firstname“).value=““ document.getElementById(“lastname“).value=““ $(“#firstnameLabel“).text(““) $(“#lastnameLabel“).text(““) } function check(){ var txt_firstname = $.trim($(“#firstname“).attr(“value“)) var txt_lastname = $.trim($(“#lastname“).attr(“value“)) $(“#firstnameLabel“).text(““) $(“#lastnameLabel“).text(““) var isSuccess = 1; if(txt_firstname.length == 0) { $(“#firstnameLabel“).text(“firstname不能为空！“) $(“#firstnameLabel“).css({“color“:“red“}); isSuccess = 0; } if(txt_lastname.length == 0) { $(“#lastnameLabel“).text(“lastname不能为空！“) $(“#lastnameLabel“).css({“color“:“red“}); isSuccess = 0; } if(isSuccess == 0) { return false; } return true; } 《/script》 《/head》 《body》 提交表单前进行验证(方法二) 《hr width=“40%“ align=“left“ /》 《form id=“form1“ method=“post“ action=“/DealWithForm1/“ onsubmit=“return check()“》 《table》 《tr》 《td》first_name:《/td》 《td》《input name=“firstname“ type=“text“ id=“firstname“ /》《/td》 《td》《label id=“firstnameLabel“》《/label》《/td》 《/tr》 《tr》 《td》last_name:《/td》 《td》《input name=“lastname“ type=“text“ id=“lastname“ /》《/td》 《td》《label id=“lastnameLabel“》《/label》《/td》 《/tr》 《/table》 《hr width=“40%“ align=“left“ /》 《button type=“submit“》提交《/button》 《button type=“button“ onclick=“jump();“》取消《/button》 《/form》 《/body》 《/html》 formpage3.html 复制代码 代码如下:《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》 《html xmlns=“http://www.w3.org/1999/xhtml“》 《head》 《meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ /》 《title》Example3《/title》 《script type=“text/javascript“ src=“/Resource/jquery-1.4.1.js“》《/script》 《script type=“text/javascript“》 function jump() { //清空表单所有数据 document.getElementById(“firstname“).value=““ document.getElementById(“lastname“).value=““ $(“#firstnameLabel“).text(““) $(“#lastnameLabel“).text(““) } function checktosubmit(){ var txt_firstname = $.trim($(“#firstname“).attr(“value“)) var txt_lastname = $.trim($(“#lastname“).attr(“value“)) $(“#firstnameLabel“).text(““) $(“#lastnameLabel“).text(““) var isSuccess = 1; if(txt_firstname.length == 0) { $(“#firstnameLabel“).text(“firstname不能为空！“) $(“#firstnameLabel“).css({“color“:“red“}); isSuccess = 0; } if(txt_lastname.length == 0) { $(“#lastnameLabel“).text(“lastname不能为空！“) $(“#lastnameLabel“).css({“color“:“red“}); isSuccess = 0; } if(isSuccess == 1) { form1.submit(); } } 《/script》 《/head》 《body》 提交表单前进行验证(方法三) 《hr width=“40%“ align=“left“ /》 《form id=“form1“ method=“post“ action=“/DealWithForm1/“》 《table》 《tr》 《td》first_name:《/td》 《td》《input name=“firstname“ type=“text“ id=“firstname“ /》《/td》 《td》《label id=“firstnameLabel“》《/label》《/td》 《/tr》 《tr》 《td》last_name:《/td》 《td》《input name=“lastname“ type=“text“ id=“lastname“ /》《/td》 《td》《label id=“lastnameLabel“》《/label》《/td》 《/tr》 《/table》 《hr width=“40%“ align=“left“ /》 《button type=“button“ onclick=“checktosubmit()“》提交《/button》 《button type=“button“ onclick=“jump();“》取消《/button》 《/form》 《/body》 《/html》 以下是视图函数、URL配置以及相关设置 -------------------------------------------------------------------------------- -------------------------------------------------------------------------------- views.py 复制代码 代码如下:#coding: utf-8 from django.if requesthod==“POST“: FirstName=request.POST.get(’firstname’,’’) LastName=request.POST.get(’lastname’,’’) if FirstName and LastName: response=HttpResponse() response.write(“《html》《body》“+FirstName+“ “+LastName+u“！ 你提交了表单！《/body》《/html》“) return response else: response=HttpResponse() response.write(’《html》《script type=“text/javascript“》alert(“firstname或lastname不能为空！“);\ window.location=“/DealWithForm1“《/script》《/html》’) return response else: return render_to_response(’formpage1.html’) def DealWithForm2(request): if requesthod==“POST“: FirstName=request.POST.get(’firstname’,’’).encode(“utf-8“) LastName=request.POST.get(’lastname’,’’).encode(“utf-8“) if FirstName and LastName: html=“《html》《body》“+FirstName+“ “+LastName+“！ 你提交了表单！“+“《/body》《/html》“ return HttpResponse(html) else: response=HttpResponse() response.write(’《html》《script type=“text/javascript“》alert(“firstname或lastname不能为空！“);\ window.location=“/DealWithForm2“《/script》《/html》’) return response else: return render_to_response(’formpage2.html’) def DealWithForm3(request): if requesthod==“POST“: FirstName=request.POST.get(’firstname’,’’) LastName=request.POST.get(’lastname’,’’) if FirstName and LastName: response=HttpResponse() response.write(’《html》《body》’+FirstName+LastName+u’！ 你提交了表单！《/body》《/html》’) return response else: response=HttpResponse() response.write(’《html》《script type=“text/javascript“》alert(“firstname或lastname不能为空！“);\ window.location=“/DealWithForm3“《/script》《/html》’) return response else: return render_to_response(’formpage3.html’) urls.py 复制代码 代码如下:from django.conf.urls.defaults import patterns, include, url import views from django.conf import settings urlpatterns = patterns(’’, url(r’^Resource/(?P《path》.*)$’,’django.views.static.serve’,{’document_root’:settings.STATIC_RESOURCE}), url(r’^DealWithForm1’,’views.DealWithForm1’), url(r’^DealWithForm2’,’views.DealWithForm2’), url(r’^DealWithForm3’,’views.DealWithForm3’), ) settings.py 复制代码 代码如下:# Django settings for CheckFormBeforeSubmit project. import os HERE = os.path.abspath(os.path.dirname(__file__)) DEBUG = True TEMPLATE_DEBUG = DEBUG ... STATIC_RESOURCE=os.path.join(HERE, “resource“) ... MIDDLEWARE_CLASSES = ( ’django.middleware.common.CommonMiddleware’, ’django.contrib.sessions.middleware.SessionMiddleware’, ’django.middleware.csrf.CsrfViewMiddleware’, ’django.contrib.auth.middleware.AuthenticationMiddleware’, ’django.contrib.messages.middleware.MessageMiddleware’, ’django.middleware.csrf.CsrfResponseMiddleware’, ) ROOT_URLCONF = ’CheckFormBeforeSubmit.urls’ TEMPLATE_DIRS = ( os.path.join(HERE,’template’), # Put strings here, like “/home/html/django_templates“ or “C:/www/django/templates“. # Always use forward slashes, even on Windows. # Don’t forget to use absolute paths, not relative paths. )

form表单的数据先由js判断处理，通过后再提交数据到后台。

1、js获取表单数据，根据实际情况判断是否符合规则。一般的判断是否为空，是否含有不安全字符，有就过滤掉(这一步也可以在后台处理)。

2、对于未通过的输入，向用户返回信息提示。

3、验证通过，提交数据到后台。

4、根据实际需求做处理.....

下面是一个简单的例子:

《form id=“loginForm“ action=““ method=“post“》    用户名: 《input id=“username“ name=“username“ type=“text“ maxlength=“16“ /》    《br /》    《input id=“go“ type=“button“ value=“提交“ /》《/form》《script》    var loginForm = document.getElementById(’loginForm’);    var go = document.getElementById(’go’);    go.onclick = function(){        var username = loginForm.username.value        //这里判断了用户名的输入不能为空，且长度为6-16位        if(username && (typeof(username)!=’undefined’) && (username!=0) && (username.length》=6) && (username.length《=16)){            //验证通过，提交表单数据            loginForm.submit();        }else{            alert(’输入不符合规则’);        }    }《/script》

通常要先在前端对数据做处理得情况下，并不是用《input type=“submit“ /》按钮，而是用《input type=“button“ /》按钮，因为要先对数据进行处理再提交到后台；对于数据的判断验证，大多是使用正则表达式来判断的，虽然比较麻烦，不过如今浏览器对html5的兼容则省掉不少麻烦，新增的 input 类型可以满足一般的需求。

不满足以下条件可能就出现验证不走心的状态~~~

正确实例：

童鞋们~ 你们一定也遇到过对象中的对象无法验证的情况吧

举个栗子~~

有两种方法，如下：

2.没有使用el-form表单的重置 this.$options.data()是vue实例初始化时的data数据，只读属性

el-date-picker 不允许选当前之前日期

监听计算属性 （计算属性+el-form进行表单验证）=》 利用value给v-model赋值

解决方法二、

$set()方法相当于手动的去把obj.b处理成一个响应式的属性，此时视图也会跟着改变了

《form onsubmit=“验证js函数“》 函数验证后返回true，表单就提交。返回false，表单就不会提交。